<template>
  <div id="VIP_index" class="all">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理 </el-breadcrumb-item>
      <el-breadcrumb-item>销售统计</el-breadcrumb-item>
    </el-breadcrumb>

    <br>

    <div class="table-container">
      <span style="margin-right: 91%;padding: 10px;"><b>销售统计</b></span>
      <el-divider class="custom-divider"></el-divider>
      <el-row :gutter="20">
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.dnumber" :title="chart.title1"></el-statistic>
          </div>
        </el-col>
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.dmoney" :title="chart.title2"></el-statistic>
          </div>
        </el-col>
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.mnumber" :title="chart.title3">
              <template slot="suffix"></template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6" style="padding:10px;">
          <div>
            <el-statistic group-separator="," :precision="0" :value="chart.mmoney" :title="chart.title4">
              <template slot="suffix"></template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>

    <br>

    <div class="table-container">
      <span style="margin-right: 91%;padding: 10px;"><b>销售查询</b></span>
      <el-divider class="custom-divider"></el-divider>
      <el-form :model="searchform" ref="form">
        <el-row>
          <el-col :span="4">
            <el-input v-model="searchform.commodityId" style="width: 95%;padding: 10px;" placeholder="商品编号" />
          </el-col>
          <el-col :span="4">
            <el-input v-model="searchform.commodityName" style="width: 95%;padding: 10px;" placeholder="商品名称" />
          </el-col>

          <el-col :span="5" style="text-align: left;padding: 8px 20px;">
            <el-button type="primary" style="font-size: 16px;" @click="submitselMessage" icon="el-icon-search">
              搜索</el-button>
          </el-col>
          <el-col :span="7" style="text-align: right;padding: 8px 20px;">
            <el-button type="success" style="font-size: 16px;" @click="ascendingSort"> 升序排列</el-button>
          </el-col>
          <el-col :span="4" style="text-align: left;padding: 8px 20px;">
            <el-button type="success" style="font-size: 16px;" @click="descendingSort"> 降序排列</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <br>

    <!--表格数据-->
    <div class="table-container">
      <span style="margin-right: 91%;padding: 10px;"><b>销售信息</b></span>
      <el-divider class="custom-divider"></el-divider>
      <el-table :data="maindata" style="width: 100%" size="medium">
        <el-table-column prop="commodityId" width="420" label="商品编号"> </el-table-column>
        <el-table-column width="420" prop="commodityName" label="商品名称"></el-table-column>
        <el-table-column width="420" prop="number" label="总销量">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        background layout="total, prev, pager, next, jumper" :total="400">
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import axios from 'axios';
export default {
  data() {
    return {
      empId: "",
      cusId: "",
      username: "",
      password: "",
      order: "",
      maindata: [{

      }
      ],
      searchform: {
        commodityId: "",
        commodityName: "",
      },
      chart: {
        title1: "日销售量",
        // dnumber: 120,
        dnumber: "",
        title2: "日销售额",
        // dmoney: 1473,
        dmoney: "",
        title3: "月销售量",
        // mnumber: 3621,
        mnumber: "",
        title4: "月销售额",
        // mmoney: 40235,
        mmoney: ""
      },


      formLabelWidth: '90px',
    };
  },

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    getMainData() {
      const url = "http://localhost:8080/sellsta";
      // 使用axios发送GET请求
      axios.get(url).then((response) => {
        // 请求成功处理
        console.log(response.data);
        // 将获取的数据赋值给你的数据属性，比如this.test
        this.maindata = response.data.data;
      }).catch((error) => {
        // 请求失败处理
        console.error('Error in API request', error);
      });
    },

    getTitledata() {
      const url = "http://localhost:8080/sellstatitle";
      axios.get(url)
        .then((response) => {
          console.log(response.data);
          this.chart.dnumber = response.data.data.dnumber;
          this.chart.dmoney = response.data.data.dmoney;
          this.chart.mnumber = response.data.data.mnumber;
          this.chart.mmoney = response.data.data.mmoney;
        })
        .catch((error) => {
          console.error('Error in getTitledata request', error);
        });
    },
    getOrderdata() {
      let url = "http://localhost:8080/sellstaorder/";
      url += this.order;
      axios.get(url)
        .then((response) => {
          console.log(response.data);
          this.maindata = response.data.data;
        })
        .catch((error) => {
          console.error('Error in getTitledata request', error);
        });
    },

    selDate() {
      const url = "http://localhost:8080/sellsta";
      axios.get(url, {
        params: this.searchform
      }).then((response) => {
        console.log(response.data);
        this.maindata = response.data.data;
      })
        .catch((error) => {
          console.error('Error in selData request', error);
        });
    },


    ascendingSort() {
      this.order = 0;
      this.getOrderdata();
    },

    descendingSort() {
      this.order = 1;
      this.getOrderdata();
    },

    submitselMessage() {
      this.selDate();
    },

    getCategoryIdText(categoryId) {
      const categoryIdMap = {
        1: "服装",
        2: "食物",
        3: "生活用品",
        4: "娱乐用品",
        5: "学习用品",
      };
      return categoryIdMap[categoryId];
    },
    init() {
      this.empId = localStorage.getItem('empId');
      this.cusId = localStorage.getItem('cusId');
      this.username = localStorage.getItem('username') || "";
      this.password = localStorage.getItem('password') || "";
    },
    checkid() {
      if (this.empId == "" || this.empId == null)
        this.$router.push('/login');
    },
  },
  mounted() {
    this.init();
    this.checkid();
    this.getMainData();
    this.getTitledata();

  },
};
</script>
  
<style>
.router-link-active {
  text-decoration: none;
}

.table-container {
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
}

.custom-divider {
  margin: 4px 0;
  /* 调整 el-divider 的间距 */
}

.custom-divider-select {
  margin: 50% 0;
  /* 调整 el-divider 的间距 */
  background-color: RGB(0, 0, 0);
  width: 5%;
  height: 10%;

}

.custom-descriptions {
  padding-left: 10px;
  margin-bottom: 0;
}

.all {
  line-height: 30px;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>